<template>
  <div>
    <div id="paper">
      <h1>{{wiki_title}}</h1>
      <h5>
        <span>
          <i class="iconfont iconyanjing"></i>
          <!--&nbsp;浏览次数&nbsp;-->
          {{wiki_read_num}}
        </span>
        <span >
            <i class="iconfont icontags-" @click="delPage(wiki_id)"></i>
          {{wiki_tags}}
          </span>
        <span style="display: none" v-show="isLogin">
            <i class="iconfont iconbianji" @click="editePage(wiki_id)"></i>
          </span>
        <span style="display: none" v-show="isLogin">
            <i class="iconfont iconpicture-delet" @click="delPage(wiki_id)"></i>
          </span>
        <br>
        <span>
           &nbsp;最后编辑于&nbsp;{{wiki_last_time}}
        </span>

      </h5>
      <!--<CuText :text="wiki_text"></CuText>-->
      <div id="CuText" >
        <!--<h2>Repositories of http://192.168.10.84:5000</h2>-->
        <!--<div v-html='text' v-highlightjs>-->
        <div class="markdown-body" v-html='wiki_text' ></div>
        </div>
    </div>
    <Rside class="rside-pager"></Rside>
  </div>
</template>
<script>
  import Rside from '~/components/Rside.vue'
  // import showdown from 'showdown'
  // import hljs from 'highlight.js'
  // import 'highlight.js/styles/default.css'
  export default {
    data () {
      return {
        wiki_id: null,
        wiki_text: null,
        wiki_title: null,
        wiki_read_num: null,
        wiki_last_time: null,
        wiki_tags: null,
        isLogin: null
      }
    },
    asyncData ({app, params}) {
      console.log(params.id)
      let Base64 = require('js-base64').Base64
      let wikiId = params.id
      // let converter = new showdown.Converter()
      var qurl= 'wiki/getWiki/' + wikiId
      if (process.client){
        qurl = process.env.BASE_URL + qurl
      }
      return app.$axios.get(qurl).then((res) => {
        // console.log(res)
        // let block = converter.makeHtml(res.data.data.content)
        // let convblock = converter.makeHtml(res.data.data.content)
        // let block = hljs.highlightBlock(convblock)
        // console.log(convblock)
        // console.log(block)
        // this.wiki_text = Hljs.highlightBlock(block)
        // console.log(block)
        return {wiki_id: wikiId,
          wiki_des: res.data.data.content,
          wiki_tags: res.data.data.tags,
          wiki_summary: res.data.data.summary,
          // wiki_text: block,
          wiki_text: Base64.decode(res.data.data.content_html),
          wiki_title: res.data.data.title,
          wiki_read_num: res.data.data.read_num,
          wiki_last_time:res.data.data.last_time,
          wiki_tags:res.data.data.tags}
      }, function (response) {
        console.log('error')
      })
    },
    mounted () {
      // this.Hljs()
      // this.Katex()
    },
    methods: {
      // Hljs () {
      //   console.log('run hljs')
      //   document.querySelectorAll('pre code').forEach((block) => {
      //     hljs.highlightBlock(block)
      //   })
      // },
      // Katex() {
      //   renderMathInElement(document.getElementById("CuText"))
      // }
    },
    head () {
      return {
        title: this.wiki_title,
        meta: [
          { hid: 'keywords', name: 'keywords', content: this.wiki_tags +  this.wiki_summary},
          { hid: 'description', name: 'description', content: this.wiki_des }
        ],
        link: [
          { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.bootcss.com/highlight.js/9.18.1/styles/a11y-light.min.css'},
          // { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css'},
          { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css'}
        ],
        script: [
          // {src: "https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"},
          // {src: "https://cdn.jsdelivr.net/npm/katex/dist/contrib/auto-render.js"}
        ]
      }
    },
    components: {
      Rside
    }
  }
</script>
<style scoped>
  #paper {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    display:inline-block;
    vertical-align:top;
    width: 64%;
    margin-right: 43px;
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.12), 0 6px 20px 0 rgba(0,0,0,.14);
  }
  h5{
    color: #999;
  }
  .rside-pager{
    display:inline-block;
    background: #fafafa;
    vertical-align:top;
    width: 25%;
  }
  #CuText {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    align-items: center;
    margin: auto;
    max-width: 75%;
    padding: 16px;
  }
</style>
